<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CareNote-login</title>
    <link rel="shortcut icon" href="http://jimo.fun/img/my/jm.png"/>
    <style>
        :root {
            /* COLORS */
            --white: #e9e9e9;
            --gray: #333;
            --blue: #0367a6;
            --lightblue: #008997;

            /* RADII */
            --button-radius: 0.7rem;

            /* SIZES */
            --max-width: 758px;
            --max-height: 420px;

            font-size: 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
            Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

        body {
            align-items: center;
            background-color: var(--white);
            background: url("http://jimo.fun/img/bj/yun.jpg");
            /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: grid;
            height: 100vh;
            place-items: center;
        }

        .form__title {
            font-weight: 300;
            margin: 0;
            margin-bottom: 1.25rem;
        }

        .link {
            color: var(--gray);
            font-size: 0.9rem;
            margin: 1.5rem 0;
            text-decoration: none;
        }

        .container {
            background-color: var(--white);
            border-radius: var(--button-radius);
            box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
            0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
            height: var(--max-height);
            max-width: var(--max-width);
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .container__form {
            height: 100%;
            position: absolute;
            top: 0;
            transition: all 0.6s ease-in-out;
        }

        .container--signin {
            left: 0;
            width: 50%;
            z-index: 2;
        }

        .container.right-panel-active .container--signin {
            transform: translateX(100%);
        }

        .container--signup {
            left: 0;
            opacity: 0;
            width: 50%;
            z-index: 1;
        }

        .container.right-panel-active .container--signup {
            animation: show 0.6s;
            opacity: 1;
            transform: translateX(100%);
            z-index: 5;
        }

        .container__overlay {
            height: 100%;
            left: 50%;
            overflow: hidden;
            position: absolute;
            top: 0;
            transition: transform 0.6s ease-in-out;
            width: 50%;
            z-index: 100;
        }

        .container.right-panel-active .container__overlay {
            transform: translateX(-100%);
        }

        .overlay {
            background-color: var(--lightblue);
            background: url("../../static/img/qin.png");
            /*参考图片：http://jimo.fun/img/bj/n01.jpg
            https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg*/
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            left: -100%;
            position: relative;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 200%;
        }

        .container.right-panel-active .overlay {
            transform: translateX(50%);
        }

        .overlay__panel {
            align-items: center;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            position: absolute;
            text-align: center;
            top: 0;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 50%;
        }

        .overlay--left {
            transform: translateX(-20%);
        }

        .container.right-panel-active .overlay--left {
            transform: translateX(0);
        }

        .overlay--right {
            right: 0;
            transform: translateX(0);
        }

        .container.right-panel-active .overlay--right {
            transform: translateX(20%);
        }

        .btn {
            background-color: var(--blue);
            background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
            border-radius: 20px;
            border: 1px solid var(--blue);
            color: var(--white);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1rem;
            padding: 0.9rem 4rem;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
        }

        .form > .btn {
            margin-top: 1.5rem;
        }

        .btn:active {
            transform: scale(0.95);
        }

        .btn:focus {
            outline: none;
        }

        .form {
            background-color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 3rem;
            height: 100%;
            text-align: center;
        }

        .input {
            background-color: #fff;
            border: none;
            padding: 0.9rem 0.9rem;
            margin: 0.5rem 0;
            width: 100%;
        }

        @keyframes show {
            0%,
            49.99% {
                opacity: 0;
                z-index: 1;
            }
            50%,
            100% {
                opacity: 1;
                z-index: 5;
            }
        }
    </style>
    <!--渐变炫彩背景style-->
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "montserrat";
            background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
            background-size: 777%;
            animation: bganimation 15s infinite;
        }

        .text {
            color: white;
            text-align: center;
            text-transform: uppercase;
            margin: 300px 0;
            font-size: 22px;
        }

        @keyframes bganimation {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
    </style>
    <!-- 背景div 浮动的线条-->
    <script type="text/javascript">
        window.onload = function () {
            //配置
            var config = {
                vx: 4,	//小球x轴速度,正为右，负为左
                vy: 4,	//小球y轴速度
                height: 2,	//小球高宽，其实为正方形，所以不宜太大
                width: 2,
                count: 200,		//点个数
                color: "121, 162, 185", 	//点颜色
                stroke: "130,255,255", 		//线条颜色
                dist: 6000, 	//点吸附距离
                e_dist: 20000, 	//鼠标吸附加速距离
                max_conn: 10 	//点到点最大连接数
            }
            //调用
            CanvasParticle(config);
        }
    </script>
    <script type="text/javascript" src="../../static/user/js/canvas-particle.js"></script>
</head>
<body id="bgLine" style="body()">
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
            <h2 class="form__title">欢迎注册：Care-Note！</h2>
            <input id="userName" type="text" placeholder="name" class="input"/>
            <input id="userEmail" type="email" placeholder="Email" class="input"/>
            <input id="userPwd" type="password" placeholder="Password" class="input"/>
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <i class="icon icon-code"></i>
                    <input id="code" type="text" autocomplete="off" placeholder="邮箱验证码">
                </div>
                <div class="aui-button-code">
                    <input id="sendCode" type="button" class="btn-default" value="获取验证码">
                </div>
            </div>
            <button  type="button" id="zc" class="btn">注册</button>
            <p><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=RS8sKCoyKjcpIQU0NGsmKig"
                  style="text-decoration:none;"><img
                    src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"/></a> <a
                    href="https://wpa.qq.com/msgrd?v=3&uin=1517962688&site=qq&menu=yes" target="_blank"
                    style="font-size: 17px;background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;"><img
                    src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a></p>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">欢迎登录：Care-Note！</h2>
            <input id="email" type="email" placeholder="Email" class="input"/>
            <input id="pwd" type="password" placeholder="Password" class="input"/>
            <p style="font-size: 14px;background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;"
               class="link">忘了莫怕-右侧注册重置！</p>
            <button  type="button" class="btn" id="dl">登录</button>
            <div class="aui-cell-box">
                <label class="cell-right">
                    <input type="checkbox" value="1" name="checkbox" checked="checked">
                    <i class="cell-checkbox-icon"></i>
                    <em>同意Care-Note服务协议</em>
                </label>
            </div>
            <p><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=RS8sKCoyKjcpIQU0NGsmKig"
                  style="text-decoration:none;"><img
                    src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"/></a> <a
                    href="https://wpa.qq.com/msgrd?v=3&uin=1517962688&site=qq&menu=yes" target="_blank"
                    style="font-size: 17px;background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;"><img
                    src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a></p>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">去登录！</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">去注册！</button>
            </div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--  <script src="../../static/public/jquery.min.js"></script>-->
<script src="../../static/layer/layer.js"></script>
<script>
    let emailZZ = /^[A-Za-z0-9-_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var count = 30;
    var InterValObj1;
    var curCount1;
    $(document).keypress(function (e) {
        // 回车键事件
        if (e.which == 13) {
            $('#dl').click();
        }
    });
    /*登录*/
    $(function () {
        $("#dl").click(function () {
            var email = $.trim($("#email").val());
            var pwd = $.trim($("#pwd").val());
            if (!$(":checkbox").prop("checked")) {
                layer.msg("未勾选协议,无法登陆!");
                return;
            }
            if (email === "" || email.length === 0 || pwd === "" || pwd.length === 0) {
                layer.msg("登录信息不能为空！！！");
                return;
            }
            if (!emailZZ.test(email)) {
                layer.msg("请输入正确的Email!");
                return;
            }
            let load = layer.load();
            $.post("/login/user", {email: email, pwd: pwd}, function (message) {
                layer.close(load);
                layer.msg(message.result);
                if (message.status) {
                    window.location.href="/user";
                }
            });

        });
        /*发送验证码*/
        $("#sendCode").click(function () {
            curCount1 = count;
            let email = $.trim($("#userEmail").val());
            if (!emailZZ.test(email)) {
                layer.msg("请输入正确的Email!");
                return;
            }
            $("#sendCode").attr("disabled", "true");
            InterValObj1 = window.setInterval(SetRemainTime, 1000);
            //发送短信
            let load1 = layer.load();
            $.post("/login/send", {email: email}, function (message) {
                layer.close(load1);
                layer.msg(message.result);
            });
        });
        /*注册*/
        $("#zc").click(function () {
            let email = $.trim($("#userEmail").val());
            let name = $.trim($("#userName").val());
            let pwd = $.trim($("#userPwd").val());
            let code = $.trim($("#code").val());
            if (email === "" || email.length === 0 || pwd === "" || pwd.length === 0 || name === "" || name.length === 0 || code === "" || code.length === 0) {
                layer.msg("登录信息不能为空！！！");
                return;
            } else if (!emailZZ.test(email)) {
                layer.msg("请输入正确的Email!");
                return;
            } else {
                let load = layer.load();
                $.post("/login/post", {name: name, pwd: pwd, email: email, code: code}, function (message) {
                    layer.close(load);
                    layer.msg(message.result);
                });
            }
        });
    });

    function SetRemainTime() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);
            $("#sendCode").removeAttr("disabled");
            $("#sendCode").val("重新发送");
        } else {
            curCount1--;
            $("#sendCode").val(+curCount1 + "秒再获取");
        }
    }

    //在此书写你的jquery代码
    /* $(function(){
      $.getJSON("https://192.168.10.8:9277/admin/api/get/r",null,function (data) {
        var data1 = data.status0;
        elementById.innerText=data;

        });
    });*/


    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());

</script>
</body>

</html>
